<template>
    <div class="real-time-import-page-wrap">
        <!-- 统计图表 -->
            <div class="time_import_wrap"></div>
            <div class="unit-list-wrap">
                <ul class="unit-list" v-infinite-scroll="getRealImportQuestionData" infinite-scroll-disabled="isOver" infinite-scroll-distance="10">
                    <template v-for="(item, index) in infoList">
                        <!-- 单位list -->                   
                        <li :key="index">
                            <div class="unit-item yellow-bg" :class="[{'blue-bg': item.status == 1}, {'yellow-bg': item.status == 0}]">
                                <!-- 可以和上面合并根据条件判断显示该div -->
                                <div class="top_img" :class="[{'top_img_no': item.status == 1}, {'top_img_yes': item.status == 0}]" style="text-align:center;">
                                    <img :src="item.detailPic" v-if="item.questionType == 3 || item.questionType == 1 || item.questionType == 2" style="width:100%;height:100%" />
                                    <div class="import_type_guzhang" v-if="item.questionType == 5 || item.questionType == 4">
                                        <p style="line-height:130px;font-size:84px;color:#F0A045;">{{item.statusCount}}</p>
                                        <p style="line-height:35px;font-size:17px;margin-top:-25px;color:#FFFFFF;">{{item.questionTypeName}}</p>
                                    </div>  
                                </div>
                                <div class="import_describe">
                                    {{item.selfDesc}}
                                </div>
                                <div class="import_company">
                                    <span class="import_text">所属单位</span>
                                    <span class="import_value">{{item.organizationName}}</span>
                                </div>
                                <div class="import_gotime">
                                    <span class="import_text">持续时长</span>
                                    <span class="import_value">已持续{{item.intervalTime}}</span>
                                </div>
                                <div class="import-info">
                                    <p class="status-text" v-if="item.status == 0">未处理，请及时处理</p>
                                    <p class="status-text" style="color:#46B98F" v-if="item.status == 1">已处理</p>
                                </div>
                                <!-- hover -->
                                <div class="hover-card">
                                    <p class="import_company">{{item.organizationName}}</p>
                                    <p class="improt_gotime_hover" style="color:white">已持续{{item.intervalTime}}</p>
                                    <div v-if="showPhoneCall" class="call-wrap" style="margin-top:10px;">
                                        <a class="call-phone iconfont icon_phone" @click="callPhone(item.organizationId)"></a>
                                    </div>
                                    <div class="import-details" style="margin-top:5px">
                                        <div :class="{ 'is-higher':!showPhoneCall }" class="import-details-content">
                                            <ul class="import-details-list">
                                                <li class="import-details-item">
                                                    <span class="import_text_hover">发生时间</span>
                                                    <span class="import_value_hover" style="margin-left:10px;">{{item.startTime}}</span>
                                                </li>
                                                <li class="import-details-item">
                                                    <span class="import_text_hover">问题描述</span>
                                                    <div class="import_value_hover" style="margin-left:10px;display:inline">{{item.selfDesc}}</div>
                                                </li>
                                                <li class="import-details-item">
                                                    <!-- <span class="import_text_hover" style="font-size: 20px">已处理</span> -->
                                                    <span class="import_text_hover" style="font-size: 20px" v-if="item.status == 0">未处理</span>
                                                    <span class="import_text_hover"  style="font-size: 20px" v-if="item.status == 1">已处理</span>
                                                </li>
                                                <li class="import-details-item">
                                                    <span class="import_text_hover">填报人</span>
                                                    <span class="import_value_hover" style="margin-left:10px;">{{item.handlerAccountName}}</span>
                                                </li>
                                                <li class="import-details-item">
                                                    <span class="import_text_hover">处理类型</span>
                                                    <span class="import_value_hover" style="margin-left:10px;">{{item.handlerTypeName}}</span>
                                                </li>
                                                <li class="import-details-item">
                                                    <span class="import_text_hover">备注</span>
                                                    <div class="import_value_hover" style="margin-left:10px;display:inline">{{item.remarks}}</div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </template>    
                </ul>
                <!-- 暂无数据 -->
                <div class="no-data" v-if="isOver && infoList.length == 0"></div>
            </div>
    </div>
</template>
<script>
import {getRealImportQuestion} from '@/api/record'

export default {
    data() {
        return {
            orgId: this.orgId || this.$store.state.userInfo.organizationIds,
            queryType: 0,
            infoList: [],
            isOver:false,
            pageSize:20,
            pageIndex: -1,
            showPhoneCall:this.bsConfig.showPhoneCall!==false
        }
    },
    created() {
        //this.getRealImportQuestionData(0);
    },
    methods: {
        getRealImportQuestionData(pageIndex){
            let that = this;
            that.$Ctl.loading(1,10000)
            if(typeof(pageIndex) != 'undefined') {
                that.pageIndex = pageIndex
            } else {
                that.pageIndex += 1
            }
            let parames = {
                queryType:1,
                orgIds:that.orgId,
                pageIndex: that.pageIndex,
                pageSize: that.pageSize,
            }
            getRealImportQuestion(parames).then(res => {
                if(typeof(pageIndex) != 'undefined' && that.pageIndex === 0) {
                    that.isOver = false
                    // 重新查询
                    that.infoList = res.data
                } else {
                    //that.infoList = $.extend(that.infoList, res.data)
                    that.infoList.push.apply(that.infoList, res.data)
                    that.$Ctl.loading(0)
                }

                // 最后一页停止滚动加载
                if(res.data.length < that.pageSize) {
                    that.isOver = true
                } else {
                    that.isOver = false
                }
            })
        },
        callPhone(orgId) {
            this.$emit('openCellCenter', orgId)
        }
       
    },
    watch: {
       
    }
}
</script>
<style lang="scss" scoped>
.real-time-import-page-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../../../../../assets/images/detailPage/bg-item.png);
        .time-point-distribution-wrap {
            padding: 35px 50px 10px 50px;
            width: 49.5%;
            height: 49%;
            background:rgba(255,255,255,.02);
            .time-point-distribution-echart {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
        .weekly-distribution-wrap {
            padding: 35px 50px 10px 50px;
            width: 49.5%;
            height: 49%;
            background:rgba(255,255,255,.02);
            .weekly-distribution-echart {
                margin-top: -40px;
                width: 100%;
                height: 100%;//calc(100% - 40px);
            }
        }
    .top_img_no{
        width: 270px;
        height: 165px;
        background-color: #172F6B;
    }
    .top_img_yes{
        width: 270px;
        height: 165px;
        background-color: #262612;
    }
    .import_describe{
        height: 48px;
        font-size: 18px;
        margin-top: 10px;
        color: white;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }
    .import_company{
        margin-top: 10px;
        font-size: 14px;
        .import_text{
            color: #868378;
        }
        .import_value{
            color: white;
            margin-left: 10px;
        }
    }
    .import_gotime{
        font-size: 14px;
        .import_text{
            color: #868378;
        }
        .import_value{
            color: white;
            margin-left: 10px;
        }
    }
    .import-info{
        margin-top: 10px;
        font-size: 22px;
        font-weight: 400;
        line-height: 56px;
        color: #E6A246;
        text-align: center;
    }
    .yellow-bg{
        background: url(../../../../../assets/images/detailPage/yellow_item_bg.png) center center no-repeat;
        background-size: contain;
    }
    .hover-card{
        background: url(../../../../../assets/images/detailPage/yellow-item-bg-hover.png) center center no-repeat;
        //margin-top: -22px;
        .import_company{
        font-size: 24px;
        font-weight: bold;
        color: white;
        line-height: 40px;
        }
    }
    .hover-card .import_gotime_hover{
        font-size: 14px;
        color: white;
    }
    .import-details {
        .import-details-title {
            font-size:20px;
            font-weight:bold;
            color:#4E9ED6;
            line-height:44px;
        }
        .import-details-content {
            height: 140px;
            font-size: 14px;
            color: #FFF;
            overflow: auto;
            &.is-higher{
                height: 240px;
            }
            .import-details-list{
                display: flex;
                flex-direction: column;
                list-style: none;
                .import-details-item {
                    width: 100%;
                    line-height: 26px;
                }
            }
            
        }
    }
}
</style>
